<template>
  <div class="dashboard-container">
    <!-- 顶部 card  -->
    <top-panel class="row-container" />
    <!-- 中部图表  -->
    <middle-chart class="row-container middle-chart" />
    <!-- 列表排名 -->
    <rank-list class="row-container" />
    <!-- 出入库概览 -->
    <output-overview class="row-container" />
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'DashboardBase',
});
import MiddleChart from './components/MiddleChart.vue';
import OutputOverview from './components/OutputOverview.vue';
import RankList from './components/RankList.vue';
import TopPanel from './components/TopPanel.vue';
</script>

<style scoped>
/* 首页容器：自适应屏幕高度 */
.dashboard-container {
  height: 100%;
  max-height: calc(100vh - 64px); /* 100vh - header高度 */
  overflow-y: auto; /* 如果内容超出，允许滚动 */
  padding: 16px; /* 减少外边距 */
}

.row-container:not(:last-child) {
  margin-bottom: 12px; /* 减少组件间距 */
}

/* 中部图表：限制高度 */
.middle-chart {
  max-height: 300px;
}
</style>
